<!-- 添加按钮框 -->
<template>
    <div class="btn-panl" :style="btnStyle">
        <div class="btn-panl-main">
            <div class="btn-panl-icon"></div>
            <div class="btn-panl-text" :style="{color: textColor}">
                {{btnName}}
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {
    Vue,
    Component,
    Prop
} from 'nuxt-property-decorator'
@Component({
    name: 'addBtn'
})
export default class ShopAddBtn extends Vue {
    @Prop({
        type: String,
        default: '新建'
    })
    btnName!: string
    @Prop({
        type: String,
        default: '100%'
    })
    btnWidth!: string
    @Prop({
        type: String,
        default: '100%'
    })
    btnHeight!: string
    @Prop({
        type: String,
        default: '#ccc'
    })
    borderColor!: string
    @Prop({
        type: String,
        default: '#fff'
    })
    textColor!: string
    btnStyle: any = {
        width: this.btnWidth,
        height: this.btnHeight,
        borderColor: this.borderColor
    }
}
</script>

<style lang="scss" scoped>
    .btn-panl{
        border: 1px dashed #cccccc;
        border-radius: 4px;
        z-index: 9;
        cursor: pointer;
        &,
        .btn-panl-main,
        .btn-panl-icon:before,
        .btn-panl-icon:after{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .btn-panl-icon{
            width: 0;
            height: 0;
            margin-bottom: 30px;
            position: relative;
            &:before,&:after{
                content: '';
                width: 60px;
                background-color: #999;
                border-radius: 2px;
                height: 4px;
                transform: translate(0, 0);
            }
            &:after{
                transform: rotate(-90deg);
            }
        }
        .btn-panl-text{
            padding-top: 20px;
            color: #fff;
        }
        /*&:hover{*/
        /*    border-color: #11A9E8;*/
        /*    .btn-panl-text{*/
        /*        color: #11A9E8;*/
        /*    }*/
        /*    .btn-panl-icon{*/
        /*        &:before,&:after{*/
        /*            background-color: #11A9E8;*/
        /*        }*/
        /*    }*/
        /*}*/
    }
</style>
